<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0",>
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            width:100% ;
            height: 0px;
            padding-bottom: 50%;
        }
        .header {
            height: 70px;
            background-color: #f8f8f8;
        }

        .header-left {
            width: 50%;
            line-height: 70px;
            text-align: center;
            float: left;
        }

        .header-right {
            width: 50%;
            float: left;
            line-height: 70px;
            text-align: center;
        }

        .gallery-text {
            color: black;
            text-decoration: none;
            font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
            font-size: 20px;
            letter-spacing: 2px;
        }

        .logo {
            margin-top: -10px;
        }

        .dropdown-menu {
            background-color: #f8f8f8;
        }

        .container {
            height: 0px;
            padding-bottom: 70%;
            width: 100%;
            background: url("/images/bg.jpg") no-repeat;
            background-size: 100% 100%;
        }

        #carousel-example-generic {
            width: 60%;
            height: 0px;
            padding-bottom: 40%;
            margin-left: 20%;
            border: solid #f8f8f8 2px;
        }

        .title-box {
            margin: auto;
            margin-top: 3%;
            color: #000000;
            text-align: center;
        }
        .footer{
            height: 0px;
            padding-bottom: 10%;
            background-color: #f8f8f8;
        }
        #about{
            width: 50%;
            height: 150px;
            float: left;
            text-align: center;
        }
        #link{
            width: 50%;
            height: 150px;
            float: left;
            text-align: center;
        }
        #link ul{
            text-align: left;
            margin-left: 20%;
        }
        #link ul li{
            list-style: none;
        }
        .copy-right{
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<#include "public/head.ftl"/>

<div class="container">
    <div class="title-box">
        <h3 class="title">美好家庭</h3>
    </div>
    <a href="/send/detail">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="/images/1.jpg"  style="width:100%;height: 100%;">
            </div>
            <div class="item">
                <img src="/images/2.jpg"  style="width: 100%;height: 100%;">
            </div>
            <div class="item">
                <img src="/images/3.jpg"  style="width:100%;height: 100%">
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        </a>
    </div>
    </a>
</div>
<#include "public/footer.ftl">